<template>
  <el-col :span="20" style="height: 93vh; overflow-y: scroll;padding: 0 1vh">
    <el-col :span="24">
      <div id="Chart1" style="height: 90vh"></div>
    </el-col>
    <el-col :span="24">
      <div id="Chart2" style="height: 90vh"></div>
    </el-col>
  </el-col>
</template>

<script>
export default {
  name: "topicVue",
  mounted() {
    this.draw1()
    this.draw2()
  },
  methods: {
    draw1() {
      const dat = this.$topic
      let myChart = this.$echarts.init(document.getElementById('Chart1'), 'chalk')
      myChart.setOption({
        // title: {
        //   text: 'Les Miserables',
        //   subtext: 'Default layout',
        //   top: 'bottom',
        //   left: 'right'
        // },
        tooltip: {},
        legend: [
          {
            data: dat.categories.map(function (a) {
              return a.name;
            })
          }
        ],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: '主题词',
            type: 'graph',
            layout: 'none',
            data: dat.nodes,
            links: dat.links,
            categories: dat.categories,
            roam: true,
            label: {
              show: true,
              position: 'right',
              formatter: '{b}'
            },
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 10
              }
            }
          }
        ]
      })
    },
    draw2() {
      const dat = this.$topic_
      let myChart = this.$echarts.init(document.getElementById('Chart2'), 'chalk')
      myChart.setOption({
        // title: {
        //   text: 'Les Miserables',
        //   subtext: 'Default layout',
        //   top: 'bottom',
        //   left: 'right'
        // },
        tooltip: {},
        legend: [
          {
            data: dat.categories.map(function (a) {
              return a.name;
            })
          }
        ],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: '主题词',
            type: 'graph',
            layout: 'none',
            data: dat.nodes,
            links: dat.links,
            categories: dat.categories,
            roam: true,
            label: {
              show: true,
              position: 'right',
              formatter: '{b}'
            },
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 10
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.el-col {
  margin-bottom: 1vh;
}

</style>